<template>
  <div id="app">
    <el-container>
      <el-header>
        <site-header />
      </el-header>
      <!-- 删除全局错误提示 -->
      <el-main>
        <router-view />
      </el-main>
      <el-footer>
        <site-footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import SiteHeader from '@/components/layout/SiteHeader.vue'
import SiteFooter from '@/components/layout/SiteFooter.vue'

export default {
  name: 'App',
  components: {
    SiteHeader,
    SiteFooter
  },
  computed: {
    ...mapGetters({
      error: 'error',
      isAuthenticated: 'auth/isAuthenticated'
    })
  },
  methods: {
    ...mapActions({
      clearError: 'clearError',
      refreshAuthState: 'auth/refreshAuthState'
    }),
    
    // 设置ResizeObserver错误处理器
    setupResizeObserverErrorHandler() {
      // 方法1: 使用事件监听器抑制错误
      window.addEventListener('error', (event) => {
        if (
          event.message &&
          typeof event.message === 'string' &&
          event.message.includes('ResizeObserver loop')
        ) {
          event.stopImmediatePropagation();
          event.preventDefault();
          return false;
        }
      }, true);
      
      // 方法2: 使用全局错误处理函数
      const originalOnError = window.onerror;
      window.onerror = function(message, source, lineno, colno, error) {
        if (message && typeof message === 'string' && message.includes('ResizeObserver loop')) {
          return true; // 阻止错误传播
        }
        return originalOnError ? originalOnError(message, source, lineno, colno, error) : false;
      };
      
      // 方法3: 定义自定义ResizeObserver以防止循环
      try {
        if (typeof window.ResizeObserver !== 'undefined') {
          const originalResizeObserver = window.ResizeObserver;
          window.ResizeObserver = class CustomResizeObserver extends originalResizeObserver {
            constructor(callback) {
              const safeCallback = (entries, observer) => {
                try {
                  callback(entries, observer);
                } catch (e) {
                  if (e.message && e.message.includes('ResizeObserver loop')) {
                    console.warn('已抑制 ResizeObserver 循环错误');
                    return;
                  }
                  throw e;
                }
              };
              super(safeCallback);
            }
          };
          console.log('已注册自定义 ResizeObserver');
        }
      } catch (error) {
        console.error('设置 ResizeObserver 错误处理器失败:', error);
      }
    }
  },
  watch: {
    // 监听错误状态，当出现分类数据错误时立即清除
    error(newVal) {
      if (newVal && typeof newVal === 'string' && newVal.includes('分类数据')) {
        this.clearError();
      }
    }
  },
  created() {
    // 自动刷新认证状态
    this.refreshAuthState();
    
    // 设置ResizeObserver错误处理
    this.setupResizeObserverErrorHandler();
  },
  mounted() {
    // 防止ResizeObserver错误
    console.log('App 已加载，设置全局错误处理');
    
    // 定期刷新认证状态
    const refreshInterval = setInterval(() => {
      this.refreshAuthState();
    }, 300000); // 每5分钟刷新一次
    
    // 保存interval的引用，以便在beforeUnmount时清除
    this.refreshInterval = refreshInterval;
  },
  beforeUnmount() {
    // 组件卸载前清除定时器
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  }
}
</script>

<style lang="scss">
@use "sass:color";

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-height: 100vh;
}

.el-header {
  padding: 0;
}

.el-main {
  padding: 20px;
  min-height: calc(100vh - 160px);
}

.el-footer {
  padding: 20px;
}
</style> 